<style>
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    .msgtag {
        margin-left: 15px;
    }

    .msgtag .layui-badge {
        margin-bottom: 10px;
        cursor: pointer;
    }

    .el-input__inner,
    .el-cascader {
        line-height: 30px !important;
        height: 30px !important;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding ">
        <div class=" rc-pannel layui-form">
            <div class=" rc-pannel-header rc-pagepadding rc-bold">
                <i class="iconfont goback rc-pointer">&#xe62b;</i> 编辑消息模板
            </div>
            <div class="rc-pannel-body  rc-pagepadding">


                <div class="layui-form-item">
                    <label class="layui-form-label">挂载事件钩子</label>
                    <div class="layui-input-block">
                        <input type="text" id="hookident" name="hookident" autocomplete="off" value="" lay-verify="required" class="layui-input" title="所需积分" />
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">消息编号 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="一般SMS手机短信需要" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="msgid" autocomplete="off" value="<?php echo $info['msgid'] ?>" class="layui-input" />

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="SMS短信一般为空" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" value="<?php echo $info['title'] ?>" class="layui-input" />

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">内容 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="SMS短信一般为空,右侧如有标签可点击直接插入到内容中,参数格式：{#code#}。" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <div class="rc-flex">
                            <div class="rc-flex1"><textarea class="layui-textarea" id="content" name="content"><?php echo $info['content'] ?></textarea></div>
                            <div style="width: 200px;display:none" class="msgtag" id="templatetags">

                            </div>
                        </div>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">发送通道</label>
                    <div class="layui-input-block">
                        <?php
                        $channelids = explode(',', trim($info['channel'], ','));
                        foreach ($channels as $channel) {
                        ?>
                            <input type="checkbox" autocomplete="off" name="channel[]" <?php echo in_array($channel['id'], $channelids) ? 'checked' : '' ?> value="<?php echo $channel['id'] ?>" title="<?php echo $channel['title'] ?>" />
                        <?php
                        } ?>
                    </div>
                </div>


                <div class="layui-form-item rc-margin-bottom0">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-sm">重置</button>
                    </div>
                </div>
            </div>



        </div>

    </div>
</div>
<script src="/static/admin/lib/layui/modules/cascader/cascader.js"></script>

<script>
    layui.use(function() {

        var form = layui.form;

        var layCascader = layui.layCascader;

        var el_hooks = '<?php echo $hooks ?>';
        var el_hooks_obj = $.parseJSON(el_hooks);
        var el_cascader = layCascader({
            elem: '#hookident',
            filterable: true,
            options: el_hooks_obj,
            value: '<?php echo $info['hookident'] ?>',
            props: {
                value: 'ident',
                label: 'title',
            },

        });


        el_cascader.changeEvent(function(value, Node) {
            $('#templatetags').html('');
            $('#templatetags').hide();
            getHookParam(value);
        });


        //获取钩子参数
        getHookParam('<?php echo $info['hookident'] ?>');

        function getHookParam(eventhookident) {
            $.ajax({
                url: '/admin/cnf/Message/editTemplate?type=getHookParam&eventhookident=' + eventhookident, //请求路径
                type: "GET", //请求方式
                success: function(data) {
                    if (data.code == 0) {
                        if (data.data.param) {
                            $('#templatetags').show();
                            var params = $.parseJSON(data.data.param);
                            var tags = '';
                            $.each(params, function(i, v) {

                                tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#' + i + '#}">' + v + '</span>';
                            });
                            tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#username#}">用户名</span>';
                            tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#name#}">姓名</span>';
                            $('#templatetags').html(tags);
                        }

                    }

                },
                error: function() {

                },

            });

        }

        function insertTextAtCursor(text) {
            var textarea = document.getElementById("content");
            var cursorPosition = textarea.selectionStart; // 获取光标位置
            var textBeforeCursor = textarea.value.substring(0, cursorPosition); // 光标前的文本
            var textAfterCursor = textarea.value.substring(cursorPosition, textarea.value.length); // 光标后的文本
            textarea.value = textBeforeCursor + text + textAfterCursor; // 插入指定文本

            // 更新光标位置到插入文本的末尾
            textarea.selectionStart = textarea.selectionEnd = cursorPosition + text.length;
        }

        $('body').on('click', '.templatetag', function() {
            insertTextAtCursor($(this).attr('val'));
        });

        form.on('submit(submit)', function(data) {
            $.ajax({
                url: '/admin/cnf/Message/editTemplate?id=<?php echo request()->get('id'); ?>', //请求路径
                type: "POST", //请求方式
                data: data.field,
                success: function(data) {
                    if (data.code == 0) {
                        toastr_success("编辑成功", function() {
                            window.location.href = '/admin/cnf/Message/templates';
                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });
        });



    });
</script>